// TDesign 主题配置
import 'tdesign-react/es/style/index.css';

// 定义主题色彩
export const themeColors = {
  primary: '#0052d9',
  primaryHover: '#266fe8',
  primaryActive: '#0034a6',
  secondary: '#7c3aed',
  secondaryHover: '#8b5cf6',
  secondaryActive: '#6d28d9',
  success: '#00a870',
  successHover: '#07c160',
  successActive: '#078d4c',
  warning: '#ed7b2f',
  warningHover: '#f29a43',
  warningActive: '#d35a21',
  error: '#d54941',
  errorHover: '#e06259',
  errorActive: '#ad352f',
  background: '#f3f3f3',
  backgroundContainer: '#ffffff',
  text: {
    primary: '#000000',
    secondary: '#666666',
    placeholder: '#bbbbbb',
    disabled: '#cccccc'
  },
  border: {
    level1: '#e7e7e7',
    level2: '#eeeeee'
  },
  gray: {
    50: '#f6f6f6',
    100: '#f1f1f1',
    200: '#eeeeee',
    300: '#e7e7e7',
    400: '#dcdcdc',
    500: '#c5c5c5',
    600: '#a6a6a6',
    700: '#8b8b8b',
    800: '#777777',
    900: '#5e5e5e'
  }
};

// 定义字体配置
export const typography = {
  fontFamily: '"PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif',
  fontSize: {
    xs: '10px',
    s: '12px',
    base: '14px',
    m: '16px',
    l: '18px',
    xl: '20px',
    xxl: '36px'
  },
  fontWeight: {
    light: 300,
    normal: 400,
    medium: 500,
    semibold: 600,
    bold: 700
  },
  lineHeight: {
    xs: '16px',
    s: '20px',
    base: '22px',
    m: '24px',
    l: '26px',
    xl: '28px',
    xxl: '44px'
  }
};

// 定义间距配置
export const spacing = {
  xs: '4px',
  s: '8px',
  m: '16px',
  l: '24px',
  xl: '32px',
  xxl: '48px'
};

// 定义圆角配置
export const borderRadius = {
  small: '3px',
  medium: '6px',
  large: '9px',
  round: '50%'
};

// 定义阴影配置
export const boxShadow = {
  s: '0 1px 10px 0 rgba(0, 0, 0, 0.05), 0 4px 5px 0 rgba(0, 0, 0, 0.08)',
  m: '0 2px 20px 0 rgba(0, 0, 0, 0.1), 0 8px 10px 0 rgba(0, 0, 0, 0.15)',
  l: '0 8px 40px 0 rgba(0, 0, 0, 0.15), 0 16px 20px 0 rgba(0, 0, 0, 0.2)'
};

// 定义断点配置
export const breakpoints = {
  xs: 0,
  sm: 600,
  md: 900,
  lg: 1200,
  xl: 1366, // 13寸屏幕适配
  xxl: 1536
};

// 导出完整主题配置
export const theme = {
  colors: themeColors,
  typography,
  spacing,
  borderRadius,
  boxShadow,
  breakpoints
};

// 全局样式配置
export const globalStyles = `
  * {
    box-sizing: border-box;
  }
  
  body {
    font-family: ${typography.fontFamily};
    font-size: ${typography.fontSize.base};
    line-height: ${typography.lineHeight.base};
    color: ${themeColors.text.primary};
    background-color: ${themeColors.background};
    margin: 0;
    padding: 0;
  }
  
  .t-button {
    border-radius: ${borderRadius.medium};
    font-weight: ${typography.fontWeight.medium};
    transition: all 0.2s ease-in-out;
  }
  
  .t-card {
    border-radius: ${borderRadius.large};
    box-shadow: ${boxShadow.s};
    transition: all 0.2s ease-in-out;
  }
  
  .t-card:hover {
    box-shadow: ${boxShadow.m};
    transform: translateY(-2px);
  }
  
  @media (max-width: ${breakpoints.sm}px) {
    body {
      font-size: ${typography.fontSize.s};
    }
  }

  @media (max-width: ${breakpoints.xl}px) {
    html {
      font-size: 14px;
    }
    
    .t-card {
      margin: 0.5rem;
      padding: 1rem;
    }
    
    .t-layout-content {
      padding: 0.5rem !important;
    }
  }

  @media (max-width: 1280px) {
    html {
      font-size: 13px;
    }
    
    body {
      font-size: 0.875rem;
    }
    
    .container {
      max-width: 100%;
      padding: 0 0.5rem;
    }
  }

  @media (max-width: 900px) {
    html {
      font-size: 12px;
    }
  }
`;